<template>
  <div class="app-container">

    <el-row :gutter="20">
      <el-col :sm="24" :lg="24" style="padding-left: 20px">
        <h2 class="text-danger">{{cmenoticTitle}}</h2>
        <p> {{ cmenotic }}</p>
      </el-col>
    </el-row>
    <el-divider />
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <el-row>
            <el-col :span="6" class="order_card-box" >
              <el-card>
                <div class="el-table el-table--enable-row-hover el-table--medium " style="height: 100px">
                  <el-row>
                    <el-col span="12" align="center" >
                      <img v-if="orderimage" :src="orderimage" class="sidebar-logo" />
                    </el-col>
                    <el-col span="12" class="card-box" >
                      <div align="center">
                        <h1 >2953</h1>
                        <h4>订单数量(笔)</h4>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
            </el-col>

            <el-col :span="6" class="order_card-box" >
              <el-card>
                <div class="el-table el-table--enable-row-hover el-table--medium " style="height: 100px">
                  <el-row>
                    <el-col span="12" align="center" >
                      <img v-if="moneyimage" :src="moneyimage" class="sidebar-logo" />
                    </el-col>
                    <el-col span="12" class="card-box" >
                      <div align="center">
                        <h1 >16</h1>
                        <h4>产品数量(种类)</h4>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
            </el-col>

            <el-col :span="6" class="order_card-box" >
              <el-card>
                <div class="el-table el-table--enable-row-hover el-table--medium " style="height: 100px">
                  <el-row>
                    <el-col span="12" align="center" >
                      <img v-if="money1image" :src="money1image" class="sidebar-logo" />
                    </el-col>
                    <el-col span="12" class="card-box" >
                      <div align="center">
                        <h1 >2560</h1>
                        <h4>交货数量(件)</h4>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
            </el-col>

            <el-col :span="6" class="order_card-box" >
              <el-card>
                <div class="el-table el-table--enable-row-hover el-table--medium " style="height: 100px">
                  <el-row>
                    <el-col span="12" align="center" >
                      <img v-if="percentageimage" :src="percentageimage" class="sidebar-logo" />
                    </el-col>
                    <el-col span="12" class="card-box" >
                      <div align="center">
                        <h1 >86.69</h1>
                        <h4>完成率</h4>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>


    <el-row :gutter="20">
      <el-col class="card-box" :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>本周产量统计</span>
          </div>
          <div class="body">
            <div :style="{height:height,width:width}">
              <div ref="outputstatistics" style="height: 310px"/>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col class="card-box" :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>本周设备故障频次</span>
          </div>
          <div class="body">
            <div :style="{height:height,width:width}">
              <div ref="equipmentfailure" style="height: 310px"/>
            </div>
          </div>
        </el-card>
      </el-col>

    </el-row>
    <el-row :gutter="20">
      <el-col class="card-box" :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>本周产品质量统计</span>
          </div>
          <div class="body">
            <div :style="{height:height,width:width}">
              <div ref="productquality" style="height: 260px"/>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col class="card-box" :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>仓储统计</span>
          </div>
          <div class="body">
            <div :style="{height:height,width:width}">
              <div ref="warehousestatistics" style="height: 260px"/>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>


</template>

<script>

import orderImg from "@/assets_cme/images/order.png";
import moneyimage from "@/assets_cme/images/money.png";
import money1image from "@/assets_cme/images/money1.png";
import percentageimage from "@/assets_cme/images/percentage.gif";
import echarts from "echarts";
import {cmenotic} from "@/api/cmecomon/homepage"




    export default {
      // components: {bar,pie},
        name: "cmeindex",
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '500px'
      },

      data(){
        return{

          //图片资源
          orderimage: orderImg,
          moneyimage: moneyimage,
          money1image: money1image,
          percentageimage: percentageimage,
          //图表
          zxbar: null,
          zxpie: null,
          salseorderbar: null,
          // date: ['Date', '2012', '2013', '2014', '2015', '2016', '2017'],
          dates: null,
          ordertrendmetals: null,
          ordertrendnometals: null,
          ordertrendlasercladding: null,
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            userName: undefined,
            phonenumber: undefined,
            status: undefined,
            deptId: undefined,
            beginTime: 0,
            endTime: 0
          },

          // 日期范围
          dateRange: [],

        //  通知
          cmenotic: "暂无通知",
          //通知标题
          cmenoticTitle: "CME后台管理系统通知"

        };
      },

      created(){
          this.getlist();
      },

      mounted() {
        this.$nextTick(() => {
          this.initsalseordertrend();
          this.initoutputstatistics();
          this.initequipmentfailure();
          this.initproductquality();
          this.initwarehousestatistics();
        })
      },

      methods: {
        goTarget(href) {
          window.open(href, "_blank");
        },
          //获取初始数据
        getlist(){
          cmenotic(this.queryParams).then(respnse =>{
            this.cmenotic = respnse[0].noticeContent;
            this.cmenoticTitle = respnse[0].noticeTitle;
          });
          this.initsalseordertrend();
          this.initoutputstatistics();
          this.initequipmentfailure();
          this.initproductquality();
          this.initwarehousestatistics();
        },

        //初始化产量统计
        initoutputstatistics(){
          var outputstatistics = echarts.init(this.$refs.outputstatistics, "macarons");
          var outputsoption;

          outputsoption = {
            title: {
              text: '本周生产产量统计',
              subtext: 'Production Output'
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['轴承', '齿轮']
            },
            toolbox: {
              show: true,
              feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            calculable: true,
            xAxis: [
              {
                type: 'category',
                // prettier-ignore
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '轴承',
                type: 'bar',
                data: [
                  7, 23, 25, 76, 135, 162, 32
                ],
                markPoint: {
                  data: [
                    { type: 'max', name: 'Max' },
                    { type: 'min', name: 'Min' }
                  ]
                },
                markLine: {
                  data: [{ type: 'average', name: 'Avg' }]
                }
              },
              {
                name: '齿轮',
                type: 'bar',
                data: [
                  9, 26, 28, 70, 175, 182, 48
                ],
                markPoint: {
                  data: [
                    { type: 'max', name: 'Max' },
                    { type: 'min', name: 'Min' }
                  ]
                },
                markLine: {
                  data: [{ type: 'average', name: 'Avg' }]
                }
              }
            ]
          };

          outputstatistics.setOption(outputsoption);

        },

        //初始化本周设备故障频次
        initequipmentfailure(){
          var equipmentfailure = echarts.init(this.$refs.equipmentfailure, "macarons");
          var equipmentfailureoption ;

          equipmentfailureoption = {

            title: {
              text: '设备故障频次',
              subtext: 'Equipment Failure',
              left: 'left'
            },

            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: 'bottom'
            },
            toolbox: {
              show: true,
              feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }

              }
            },
            series: [
              {
                name: '设备故障',
                type: 'pie',
                // radius: [50, 250],
                center: ['50%', '42%'],
                roseType: 'area',
                itemStyle: {
                  borderRadius: 8
                },
                data: [
                  { value: 40, name: '上下料机器人' },
                  { value: 38, name: '加工机器人' },
                  { value: 32, name: '码垛机器人' },
                  { value: 30, name: '车床系统' },
                  { value: 28, name: '视觉分拣系统' },
                  { value: 26, name: '倍速链' },
                  { value: 22, name: '摄像头' },
                ]
              }
            ]
          };

          equipmentfailure.setOption(equipmentfailureoption);

        },

        //初始化产品质量
        initproductquality(){
          var productquality = echarts.init(this.$refs.productquality, "macarons");
          var productqualityoption;

          productqualityoption = {
            title: {
              text: '本周产品质量统计',
              subtext: 'Product Quality',
              left: 'left'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'right'
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: '70%',
                center: ['50%', '50%'],
                data: [
                  { value: 2048, name: '合格' },
                  { value: 135, name: '返工' },
                  { value: 80, name: '报废' }
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };

          productquality.setOption(productqualityoption);

        },

        //初始化仓储统计
        initwarehousestatistics(){

          var warehousestatistics = echarts.init(this.$refs.warehousestatistics, "macarons");
          var warehousestatisticsoption;

          warehousestatisticsoption = {
            title: {
              text: '仓储统计',
              subtext: 'Warehouse Statistics',
              left: 'left'
            },
            xAxis: {
              data: ['轴承', '齿轮', '螺栓']
            },
            yAxis: {},
            dataGroupId: '',
            animationDurationUpdate: 500,
            series: {
              type: 'bar',
              id: 'sales',
              data: [
                {
                  value: 5,
                  groupId: '轴承'
                },
                {
                  value: 2,
                  groupId: '齿轮'
                },
                {
                  value: 4,
                  groupId: '螺栓'
                }
              ],
              universalTransition: {
                enabled: true,
                divideShape: 'clone'
              }
            }
          };
          const drilldownData = [
            {
              dataGroupId: '轴承',
              data: [
                ['Z01', 4],
                ['Z02', 2],
                ['Z03', 1],
                ['Sheep', 2],
                ['Pigs', 1]
              ]
            },
            {
              dataGroupId: '齿轮',
              data: [
                ['C01', 4],
                ['C02', 2],
                ['C03',1]
              ]
            },
            {
              dataGroupId: '螺栓',
              data: [
                ['L01', 4],
                ['L02', 2],
                ['L03', 2]
              ]
            }
          ];
          warehousestatistics.on('click', function (event) {
            if (event.data) {
              var subData = drilldownData.find(function (data) {
                return data.dataGroupId === event.data.groupId;
              });
              if (!subData) {
                return;
              }
              warehousestatistics.setOption({
                xAxis: {
                  data: subData.data.map(function (item) {
                    return item[0];
                  })
                },
                series: {
                  type: 'bar',
                  id: 'sales',
                  dataGroupId: subData.dataGroupId,
                  data: subData.data.map(function (item) {
                    return item[1];
                  }),
                  universalTransition: {
                    enabled: true,
                    divideShape: 'clone'
                  }
                },
                graphic: [
                  {
                    type: 'text',
                    right: 50,
                    top: 20,
                    style: {
                      text: '返回',
                      fontSize: 18
                    },
                    onclick: function () {
                      warehousestatistics.setOption(warehousestatisticsoption);
                    }
                  }
                ]
              });
            }
          });

          warehousestatistics.setOption(warehousestatisticsoption);
        },
      },
};
</script>

<style scoped>


.sidebar-logo {
  width: 80px;
  height: 80px;
  vertical-align: middle;
  margin-right: 12px;
}


</style>
